<template>
    <div class="videopage">
        <el-button type="primary" plain icon="el-icon-plus" @click="addVideo(0)">新增摄像头</el-button>
        <el-table
                :data="videoList"
                border
                stripe
                max-height="720"
                class="videolist u_scrollBar"
                style="width: 100%">
            <el-table-column
                    fixed
                    prop="name"
                    label="位置"
                    width="200">
            </el-table-column>
            <el-table-column
                    prop="x"
                    label="经度"
                    width="120">
            </el-table-column>
            <el-table-column
                    prop="y"
                    label="纬度"
                    width="120">
            </el-table-column>
            <el-table-column
                    prop="z"
                    label="高度"
                    width="120">
            </el-table-column>
            <el-table-column
                    prop="hlshd"
                    label="hls高清"
                    width="300">
            </el-table-column>
            <el-table-column
                    prop="hls"
                    label="hls"
                    width="300">
            </el-table-column>
            <el-table-column
                    prop="rtmphd"
                    label="rtmp高清"
                    width="300">
            </el-table-column>
            <el-table-column
                    prop="rtmp"
                    label="rtmp"
                    width="500">
            </el-table-column>
            <el-table-column
                    fixed="right"
                    label="操作"
                    width="180">
                <template slot-scope="scope">
                    <el-button size="mini"
                               plain
                               type="primary"
                               @click="handleEdit(scope.$index, scope.row,1)">修改坐标
                    </el-button>
                    <el-button
                            plain
                            @click.native.prevent="deleteRow(scope.$index, videoList)"
                            type="danger"
                            size="mini">
                        移除
                    </el-button>
                </template>
            </el-table-column>
        </el-table>
        <el-dialog :title="(videoDetailstype==0?'新增':'编辑')+'摄像头'"
                   :visible.sync="videoFormVisible"
                   :before-close="handleClose"
                   custom-class="videoCtrl-dialog"
                   size="mini">
            <el-form :model="videoDetails"
                     ref="videoDetails"
                     :rules="videoRules"
            >
                <el-form-item label="位置：" prop="name" :label-width="formLabelWidth">
                    <el-input v-model="videoDetails.name" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="编号：" prop="channelNo" :label-width="formLabelWidth">
                    <el-input v-model="videoDetails.channelNo" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="编码：" prop="deviceSerial" :label-width="formLabelWidth">
                    <el-input v-model="videoDetails.deviceSerial" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="经度：" prop="x" :label-width="formLabelWidth">
                    <el-input v-model="videoDetails.x" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="纬度：" prop="y" :label-width="formLabelWidth">
                    <el-input v-model="videoDetails.y" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="高度：" prop="z" :label-width="formLabelWidth">
                    <el-input v-model="videoDetails.z" autocomplete="off"></el-input>
                </el-form-item>
                <div class="title2">视频地址：</div>
                <div style="padding-left: 60px">
                    <el-form-item label="HLSHD：" prop="hlshd" :label-width="formLabelWidth">
                        <el-input
                                type="textarea"
                                :rows="2"
                                placeholder="请输入视频地址"
                                v-model="videoDetails.hlshd">
                        </el-input>
                    </el-form-item>
                    <el-form-item label="HLS：" prop="hls" :label-width="formLabelWidth">
                        <el-input
                                type="textarea"
                                :rows="2"
                                placeholder="请输入视频地址"
                                v-model="videoDetails.hls">
                        </el-input>
                    </el-form-item>
                    <el-form-item label="RTMPHD：" prop="rtmphd" :label-width="formLabelWidth">
                        <el-input
                                type="textarea"
                                :rows="2"
                                placeholder="请输入视频地址"
                                v-model="videoDetails.rtmphd">
                        </el-input>
                    </el-form-item>
                    <el-form-item label="RTMP：" prop="rtmp" :label-width="formLabelWidth">
                        <el-input
                                type="textarea"
                                :rows="2"
                                placeholder="请输入视频地址"
                                v-model="videoDetails.rtmp">
                        </el-input>
                    </el-form-item>
                </div>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="cacel('videoDetails')">取 消</el-button>
                <el-button type="primary" @click="subVideoDetails('videoDetails')">确 定</el-button>
            </div>
        </el-dialog>


    </div>
</template>

<script>
    export default {
        name: "videolist",
        data() {
            return {
                videoList: [],
                formLabelWidth: '120px',
                videoFormVisible: false,
                videoDetailstype: 0,
                videoDetails: {
                    channelNo: '',
                    coverImage: '',
                    deviceSerial: '',
                    hls: '',
                    hlshd: '',
                    name: '',
                    // online: true,
                    rtmp: '',
                    rtmphd: '',
                    // showButton: false,
                    x: '',
                    y: '',
                    z: '',
                },
                videoRules: {
                    name: [
                        {required: true, message: '请输入位置信息', trigger: 'blur'},
                    ],
                    channelNo: [
                        {required: true, message: '请输入编号', trigger: 'blur'},
                    ],
                    deviceSerial: [
                        {required: true, message: '请输入编码', trigger: 'blur'},
                    ],
                    x: [
                        {
                            message: '请输入正确的经度',
                            trigger: 'change',
                            pattern: /^[\-\+]?(0(\.\d{1,10})?|([1-9](\d)?)(\.\d{1,10})?|1[0-7]\d{1}(\.\d{1,10})?|180\.0{1,10})$/
                        }
                    ],
                    y: [
                        {
                            message: '请输入正确的纬度',
                            trigger: 'change',
                            pattern: /^[\-\+]?((0|([1-8]\d?))(\.\d{1,10})?|90(\.0{1,10})?)$/
                        }
                    ],
                    z: [
                        {
                            message: '请输入正确的高度',
                            trigger: 'change',
                            pattern: /^(-?\d+)(\.\d+)?$/
                        }
                    ],
                    hlshd: [
                        {required: true, message: '请输入视频地址', trigger: 'blur'},
                    ],
                    hls: [
                        {required: true, message: '请输入视频地址', trigger: 'blur'},
                    ],
                    rtmphd: [
                        {required: true, message: '请输入视频地址', trigger: 'blur'},
                    ],
                    rtmp: [
                        {required: true, message: '请输入视频地址', trigger: 'blur'},
                    ],
                },
            }
        },
        mounted() {
            this.getUrl()
        },
        methods: {
            videoDetailsInit(formName) {
                this.videoDetails = {
                    channelNo: '',
                    coverImage: '',
                    deviceSerial: '',
                    hls: '',
                    hlshd: '',
                    name: '',
                    // online: true,
                    rtmp: '',
                    rtmphd: '',
                    // showButton: false,
                    x: '',
                    y: '',
                    z: '',
                }
                this.$refs[formName].resetFields();
            },
            getUrl() {
                let that = this
                return that.request
                    .geturl()
                    .then(function (response) {
                        that.videoList = response.content
                    })
                    .catch(function (error) {
                        that.fetchError = error
                    })
            },
            addVideo(type) {
                let that = this
                that.videoDetailstype = type
                that.videoFormVisible = true
            },
            handleEdit(index, row, type) {
                this.videoDetailstype = type
                this.videoFormVisible = true
                this.videoDetails = Object.assign({}, row)
            },
            deleteRow(index, rows) {
                console.log(rows[index]);
                console.log(index);
                let that = this
                let data = {
                    id: rows[index].id
                }
                that.$confirm('此操作将删除该摄像头, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    return that.request
                        .deleteVideo(data)
                        .then(function (response) {
                            console.log(response);
                            if (response.code == 100) {
                                that.$message({
                                    duration: 3000,
                                    message: response.content.msg,
                                    type: 'success'
                                });
                                rows.splice(index, 1);
                            } else {
                                that.$message({
                                    duration: 3000,
                                    message: response.content.msg,
                                    type: 'error'
                                });
                            }
                        })
                        .catch(function (error) {
                            that.fetchError = error
                        })
                }).catch(() => {
                    that.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });
            },
            cacel(formName) {
                this.videoDetailsInit(formName)
                this.videoFormVisible = false
            },
            subVideoDetails(formName) {
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        let that = this
                        console.log(this.videoDetails);
                        if (that.videoDetailstype == 0) {
                            return that.request
                                .addVideo(that.videoDetails)
                                .then(function (response) {
                                    console.log(response);
                                    if (response.code == 100) {
                                        that.$message({
                                            duration: 3000,
                                            message: response.content.msg,
                                            type: 'success'
                                        });
                                        that.videoDetailsInit(formName)
                                        that.videoFormVisible = false
                                        that.getUrl()
                                    } else {
                                        that.$message({
                                            duration: 3000,
                                            message: response.content.msg,
                                            type: 'error'
                                        });
                                    }
                                })
                                .catch(function (error) {
                                    that.fetchError = error
                                })
                        } else if (that.videoDetailstype == 1) {
                            return that.request
                                .modifyVideo(that.videoDetails)
                                .then(function (response) {
                                    console.log(response);
                                    if (response.code == 100) {
                                        that.$message({
                                            duration: 3000,
                                            message: response.content.msg,
                                            type: 'success'
                                        });
                                        that.videoDetailsInit(formName)
                                        that.videoFormVisible = false
                                        that.getUrl()
                                    } else {
                                        that.$message({
                                            duration: 3000,
                                            message: response.content.msg,
                                            type: 'error'
                                        });
                                    }
                                })
                                .catch(function (error) {
                                    that.fetchError = error
                                })
                        }
                    } else {
                        console.log('error submit!!');
                        return false;
                    }
                });
            },
            handleClose(done) {
                let that = this
                that.$confirm('确认关闭？')
                    .then(_ => {
                        that.$refs['videoDetails'].resetFields();
                        done();
                    })
                    .catch(_ => {
                    });
            }
        },
    }
</script>

<style scoped>
    .videopage {
        padding: 20px;
        height: 100vh;
    }

    .videolist {
        margin-top: 20px;
    }

    .title2 {
        padding: 0px 20px 20px;
        line-height: 24px;
        font-size: 16px;
        color: #a0a0a0;
    }
</style>